<template>
    <div class="wrapper"
         v-loading="loading"
    >

        <!-- header部分 -->
        <header>
            <p>在线支付</p>
        </header>

        <!-- 订单信息部分 -->
        <h3>订单信息：</h3>
        <div class="order-info">
            <p>
                {{shop_msg.name}}
                <i class="fa fa-caret-down" @click="detailetShow"></i>
            </p>
            <p>&#165;{{totalprice}}</p>
        </div>

        <!-- 订单明细部分 -->
        <ul class="order-detailet" v-show="isShowDetailet">
            <li v-for="item in orderList">
                <p>{{item.name}} x {{item.count}}</p>
                <p>&#165;{{item.price}}</p>
            </li>
            <li>
                <p>配送费</p>
                <p>&#165;{{shop_msg.dprice}}</p>
            </li>
        </ul>

        <!-- 支付方式部分 -->
        <ul class="payment-type">
            <li @click="paymethod=true">
                <img src="../assets/alipay.png">
                <i v-if="paymethod" class="fa fa-check-circle"></i>
            </li>
            <li @click="paymethod=false">
                <img src="../assets/wechat.png">
                <i v-if="!paymethod" class="fa fa-check-circle"></i>
            </li>
        </ul>
        <div class="payment-button">
            <button @click="commitPay" v-loading="confirom_pay_loading">确认支付</button>
        </div>

        <!-- 底部菜单部分 -->
        <Footer></Footer>
    </div>
</template>

<script>
    import Footer from '../components/Footer.vue';

    export default {
        name: 'Payment',
        data() {
            return {
                orderId: this.$route.query.orderId,
                orders: {
                    business: {}
                },
                orderList: [],
                isShowDetailet: false,
                totalnum: 0,
                totalprice: 0,
                shop_msg: null,
                paymethod: true,
                loading: true,
                confirom_pay_loading: false
            }
        },
        created() {
            // let shopCard = this.$getLocalStorage('shop_cart')
            //
            // this.totalprice = shopCard.totalprice
            // this.orderList = shopCard.goods.filter(e => {
            //     return e.quantity > 0
            // })
            // this.totalnum = shopCard.totalnum
            this.shop_msg = JSON.parse(sessionStorage.getItem('shop_msg'))
            this.findOrder()

        },
        methods: {
            async findOrder() {
                let url = "/order/info/" + this.$route.query.orderId
                const res = await this.$ajax_(url, null, 'get')
                this.totalprice = res.data.list[0].allPrice
                this.orderList = res.data.list[0].dishOrderInfoList
                this.loading = false

            },
            detailetShow() {
                this.isShowDetailet = !this.isShowDetailet;
            },
            //确认支付
            async commitPay() {
                this.confirom_pay_loading = true
                let url = "/order/pay/" + this.$route.query.orderId
                const res = await this.$ajax_(url, null, 'put')
                this.$alert_res(res)
                if (res.status === 200) {
                    this.$setLocalStorage('shop_cart', null)
                }
                this.confirom_pay_loading = false
                this.$router.push({path: '/index'})
            }
        },
        mounted() {
            //这里的代码是实现：一旦路由到在线支付组件，就不能回到订单确认组件。
            //先将当前url添加到history对象中
            history.pushState(null, null, document.URL);
            //popstate事件能够监听history对象的变化
            window.onpopstate = () => {
                this.$router.push({path: '/index'});
            }
        },
        destroyed() {
            window.onpopstate = null;
        },

        components: {
            Footer
        }
    }
</script>

<style scoped>
    /****************** 总容器 ******************/
    .wrapper {
        width: 100%;
        height: 100%;
    }

    /****************** header部分 ******************/
    .wrapper header {
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        color: #fff;
        font-size: 4.8vw;

        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    /****************** 订单信息部分 ******************/
    .wrapper h3 {
        margin-top: 12vw;
        box-sizing: border-box;
        padding: 4vw 4vw 0;

        font-size: 4vw;
        font-weight: 300;
        color: #999;
    }

    .wrapper .order-info {
        box-sizing: border-box;
        padding: 4vw;
        font-size: 4vw;
        color: #666;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .wrapper .order-info p:last-child {
        color: orangered;
    }

    /****************** 订单明细部分 ******************/
    .wrapper .order-detailet {
        width: 100%;
    }

    .wrapper .order-detailet li {
        width: 100%;
        box-sizing: border-box;
        padding: 1vw 4vw;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .wrapper .order-detailet li p {
        font-size: 3vw;
        color: #666;
    }

    /****************** 支付方式部分 ******************/
    .wrapper .payment-type {
        width: 100%;
    }

    .wrapper .payment-type li {
        width: 100%;
        box-sizing: border-box;
        padding: 4vw;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .wrapper .payment-type li img {
        width: 33vw;
        height: 8.9vw;
    }

    .wrapper .payment-type li .fa-check-circle {
        font-size: 5vw;
        color: #38CA73;
    }

    .wrapper .payment-button {
        width: 100%;
        box-sizing: border-box;
        padding: 4vw;
    }

    .wrapper .payment-button button {
        width: 100%;
        height: 10vw;
        border: none;
        /*去掉外轮廓线*/
        outline: none;
        border-radius: 4px;
        background-color: #38CA73;
        color: #fff;
    }
</style>
